<template>
  <view
    class="hb-flex hb-items-center hb-py-4 hb-border-b hb-border-solid hb-border-[#EBEDF0]"
    @click="emits('openDocument', item)"
  >
    <TmIcon
      class="hb-flex-shrink-0"
      :name="`ali-icon ${getFileIcon(item.fileSuffix).icon}`"
      :follow-theme="false"
      :color="getFileIcon(item.fileSuffix).color"
      :font-size="80"
    />
    <view class="hb-ml-2 hb-flex-1 hb-flex hb-flex-col hb-justify-between">
      <TmText _class="text-overflow-1 hb-font-bold" :label="item.fileName" :font-size="28" />
      <view class="hb-flex hb-items-center hb-mt-1">
        <TmImage
          :src="item.iconFileUrl"
          error-img-type="person"
          :width="32"
          :height="32"
          :round="25"
        />
        <TmText class="hb-ml-1" :label="item.displayName" :font-size="24" color="#969799" />
      </view>
    </view>
    <view
      v-if="showSetting"
      class="hb-pl-4 hb-h-10 hb-flex hb-items-center"
      @click.stop="emits('setting', item)"
    >
      <TmIcon name="ali-icon icon-shezhi1" color="#969799" :font-size="32" />
    </view>
  </view>
</template>

<script setup lang="ts">
  import { CircleFileListResult } from '@/api/contact/types';
  import { getFileIcon } from '@/utils';

  defineProps<{
    item: CircleFileListResult;
    showSetting: boolean;
  }>();

  const emits = defineEmits<{
    (e: 'openDocument', item: CircleFileListResult): void;
    (e: 'setting', item: CircleFileListResult): void;
  }>();
</script>

<style scoped></style>
